<template>
	<view class="new-users">
		<view class="head">
			<view class="user-card">
				<view class="bg"></view>
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar" v-if="(userInfo.avatar && userInfo.avatar != '/static/f.png')" @click="goEdit()"></image>
					<image v-else class="avatar" src="/static/images/f.png" @click="goEdit()"></image>
					<view class="info">
						<!-- #ifdef APP-PLUS -->
						<view class="name" v-if="!userInfo.uid" @click="APPtoLogin()">
							登录/注册
						</view>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<view class="name" v-if="!userInfo.uid" @tap="openAuto">
							请点击授权
						</view>
						<!-- #endif -->
						<view class="name" v-if="userInfo.uid">
							{{userInfo.nickname}}
							<view class="vip" v-if="userInfo.vip">
								<image :src="userInfo.vip_icon" alt="">
								<view style="margin-left: 10rpx;" class="vip-txt">{{userInfo.vip_name}}</view>
							</view>
						</view>
						<view class="num" v-if="userInfo.phone" @click="goEdit()">
							<view class="num-txt">ID：{{userInfo.uid}}</view>
							<view class="icon">
								<image src="/static/images/edit.png" mode=""></image>
							</view>
						</view>
						<view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">绑定手机号</view>
					</view>
				</view>

				<!-- <view class="right-btn">
					<view class="iconfont icon-shezhi" @click="goEdit()" v-if="userInfo.phone"></view>
					<navigator class="btn" url="/pages/chat/customer_list/index?type=0" hover-class="none">
						<view class="iconfont icon-xiaoxi"></view>
						<text class="iconnum" v-if="userInfo.total_unread">{{userInfo.total_unread}}</text>
					</navigator>
				</view> -->
			</view>
		</view>
		<view class="wrapper">
			<view v-if="showBuy" class="user-menus" style="margin-top: 20rpx;">
				<view class="title">我的服务</view>
				<view class="menu-box" >
						<view class="item"  >
							<navigator url="/pages/2_development/user/store_order_list" class="item-count" hover-class="none">
								<image class="service-icon" src="/static/images/order_cy.png"></image>
								<text>我的订餐</text>
							</navigator>
						</view>
						<view class="item" >
							<navigator url="/pages/2_development/user/platform_show_order" class="item-count" hover-class="none">
								<image class="service-icon" src="/static/2images/ic_gp.png"></image>
								<text>我的购票</text>
							</navigator>
						</view>
						<view class="item" >
							<navigator url="/pages/2_development/user/water_order/list" class="item-count" hover-class="none">
								<image class="service-icon" src="/static/images/order_per.png"></image>
								<text>乐园票</text>
							</navigator>
						</view>
						<view class="item" >
							<navigator url="/pages/2_development/user/show_order_list" class="item-count" hover-class="none">
								<image class="service-icon" src="/static/images/order_per.png"></image>
								<text>我的预约</text>
							</navigator>
						</view>
						<view class="item" >
							<navigator url="/pages/users/order_list/index" class="item-count" hover-class="none">
								<image class="service-icon" src="/static/images/order_shop.png"></image>
								<text>我的购物</text>
							</navigator>
						</view>

				</view>
			</view>
			<view class="order-wrapper">
				<view class="order-hd flex" @click="parkScanClick()" v-if="userInfo.is_verifier == 1">
					<view class="left">乐园验票</view>
					<view class="right flex" >
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="order-hd flex" @click="scanClick()" v-if="userInfo.is_verifier == 1">
					<view class="left">演出验票</view>
					<view class="right flex" >
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<navigator class="order-hd flex" hover-class="none" url="/pages/users/ticket/query" open-type="navigate"  v-if="userInfo.is_querier == 1">
					<view class="left">查票管理</view>
					<view class="right flex" >
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</navigator>
				<!-- <navigator class="order-hd flex" hover-class="none" url="/pages/users/user_coupon/index" open-type="navigate">
					<view class="left">我的优惠券</view>
					<view class="right flex" >
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</navigator> -->
				<navigator class="order-hd flex" hover-class="none" url="/pages/users/user_address_list/index" open-type="navigate">
					<view class="left">地址管理</view>
					<view class="right flex" >
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</navigator>
				<navigator class="order-hd flex" hover-class="none" url="/pages/users/user_goods_collection/index" open-type="navigate">
					<view class="left">我的收藏</view>
					<view class="right flex" >
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</navigator>
				
				<button class="order-hd flex" hover-class="none" open-type="contact">
					<view class="left">联系客服</view>
					<view class="right flex" >
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</button>
				
				
			</view>
		</view>

    <!-- #ifdef MP -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
    <!-- #endif -->
    <view class="full-auth" v-if="!userInfo.uid" @tap="openAuto"></view>
	
	
	<uni-popup ref="popup" class="popup-cls" :mask-click="false">
		<view class="pop-info">
			<view class="pop-top">
				验票结果
			</view>
			<view class="center">
				<template v-if="verify_data.status_value == 4">
					<view class="green">{{verify_data.status_show}}</view>
				</template>
				<template v-else>
					<view class="red">{{verify_data.status_show}}</view>
				</template>
				<view>购票人：{{verify_data.user_name}}</view>
				<view>购票时间：{{verify_data.create_time}}</view>
				<view>座位：{{verify_data.sec_title}}场 {{verify_data.area_number}}区{{verify_data.row_number}}排{{verify_data.code_number}}号</view>
			</view>
			<view class="bottom">
				<view class="agree-btn btn-selected" @click="showDetail()" >查看详情</view>
				<view class="agree-btn btn-selected" @click="confirm" >确定</view>
			</view>
		</view>
	</uni-popup>
	<!-- 扫一扫验票end  -->
	<uni-popup ref="popup2" class="popup-cls2" :mask-click="false">
		<view class="pop-info">
			<view class="pop-top">
				<view class="left">
					
				</view>
				<view class="pop_title">验票</view>
				<view class="right" @click="closeWaterPop()">
					<image class="close" src="../../static/2images/close.png"></image>
				</view>
			</view>
			<view class="center">
				<view class="section">
					票状态：
					<template v-if="use_data.status == 0"><text class="red">待支付</text></template>
					<template v-if="use_data.status == 1"><text class="green">待使用</text></template>
					<template v-if="use_data.status == 2"><text class="black">已使用</text></template>
					<template v-if="use_data.status == 3"><text class="black">已取消</text></template>
					<template v-if="use_data.status == 4"><text class="green">退款中</text></template>
					<template v-if="use_data.status == 5"><text class="black">已退款</text></template>
					<template v-if="use_data.status == 6"><text class="green">已拒绝</text></template>
				</view>
				<view class="section">购票人：{{use_data.name}}</view>
				<view class="section">手机号码：{{use_data.phone}}</view>
				<view class="section">身份证：{{use_data.id_card}}</view>
				<view class="section">购票时间：{{use_data.created_time}}</view>
			</view>
			<view class="bottom">
				<view class="agree-btn btn-selected" @click="showWaterDetail()" >查看详情</view>
				<view class="agree-btn btn-selected" @click="confirmTicket" v-if="use_data.status == 1 || use_data.status == 4 || use_data.status == 6">验票入场</view>
				<view class="gray_btn" v-else>验票入场</view>
			</view>
		</view>
	</uni-popup>
	</view>
		
</template>

<script>
	import {getUserInfo} from "@/api/user";
	import {verify} from "@/api/show";
	import {water_get_ticket,water_verify_ticket} from "@/api/water";
  // #ifdef MP
  import authorize from '@/components/Authorize';
  // #endif
  const app = getApp()
  export default {
    components: {authorize},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				userInfo: {},
				showBuy: app.globalData.temp_status != 1,
				result:'',
				verify_data:{},
				use_data:{},//使用票入场
			};
		},
    onShow(){
      this.getUserInfo();
    },
    methods: {
	  // 编辑页面
	  goEdit() {
	  	uni.navigateTo({
	  		url: '/pages/users/avatar/index'
	  	})
	  },
      /**
       * 获取个人用户信息
       */
      getUserInfo: function() {
        let that = this;
        getUserInfo().then(res => {
          that.userInfo = res.data,
              that.is_promoter = res.data.is_promoter
          that.extension_status = res.data.extension_status
        });
      },
      // 打开授权
      openAuto() {
        this.isAuto = true;
        this.isShowAuth = true
      },
      // 授权回调
      onLoadFun() {
        this.getUserInfo();
        this.isShowAuth = false
      },
      // 授权关闭
      authColse: function(e) {
        this.isShowAuth = e
      },
	  // 扫一扫二维码
	  parkScanClick(){
	  		  let that = this;
	  		  // 允许从相机和相册扫码
	  		uni.scanCode({
	  			scanType: ['qrCode'], //条形码
	  			success: function(res) {
	  				console.log(111, res['result'])
	  
	  				// 微信小程序
	  				if (res.errMsg == "scanCode:ok") {
	  					// 扫描到的信息
	  					that.verifyParkEvent(res['result']);
	  				} else {
	  
	  					console.log("未识别到二维码，请重新尝试！")
	  					uni.showToast({
	  						title: '未识别到二维码，请重新尝试！',
	  						duration: 2000
	  					});
	  				}
	  
	  			}
	  		});
	  },
	  // 查询识别出的码是否真识有效
	  verifyParkEvent(code){
	  		  this.result = code;
	  		  let that = this;
			  uni.showLoading({
			  	title:'验票中',
			  });
	  		  water_get_ticket(code).then(res => {
				  uni.hideLoading();
	  			  if(res.status == 200 && res.data){
	  				that.use_data = res.data;
	  				that.$refs.popup2.open('center');
	  			  }else{
	  				that.$util.Tips({
	  					title: '票信息不存在',
	  					icon: 'none',
	  					duration:2000
	  				})
	  			  }  
	  		  }).catch(er => {
				uni.hideLoading();
				that.$util.Tips({
					title: er,
					icon: 'error'
				})
			  });
	  },
	  // 扫一扫二维码
	  scanClick(){
		  let that = this;
		  // 允许从相机和相册扫码
		uni.scanCode({
			scanType: ['qrCode'], //条形码
			success: function(res) {
				console.log(111, res['result'])

				// 微信小程序
				if (res.errMsg == "scanCode:ok") {
					// 扫描到的信息
					// uni.showToast({
					// 	title: res.result,
					// 	duration: 2000
					// });
					that.verifyEvent(res['result']);
				} else {

					console.log("未识别到二维码，请重新尝试！")
					uni.showToast({
						title: '未识别到二维码，请重新尝试！',
						duration: 2000
					});
				}

			}
		});
	  },
	  // 查询识别出的码是否真识有效
	  verifyEvent(code){
		  this.result = code;
		  let that = this;
		  uni.showLoading({
		  	title:'验票中',
		  });
		  verify(code).then(res => {
			  uni.hideLoading();
			  if(res.status == 200 && res.data){
				that.verify_data = res.data;
				that.$refs.popup.open('center');
			  }else{
				that.$util.Tips({
					title: '票信息不存在',
					icon: 'none',
					duration:2000
				})
			  }  
		  }).catch(er => {
			uni.hideLoading();
			that.$util.Tips({
				title: er,
				icon: 'error'
			})
		  });
	  },
	  confirm(){
		  this.$refs.popup.close();
	  },
	  showDetail(){
		uni.navigateTo({
			url:'/pages/users/ticket/show_detail?id='+this.verify_data.oid+'&order_sn='+this.verify_data.order_sn+'&sn='+this.result
		});
	  },
	  //乐园验票入场
	  confirmTicket(){
		  let that = this;
		  uni.showLoading({
		  	title:'验票中',
		  });
		  water_verify_ticket(this.use_data.id).then(res => {
			  uni.hideLoading();
			  if(res.status == 200){
				 that.$refs.popup2.close();
				 uni.showToast({
					 icon:'none',
				 	 title:'验票成功，请入场！'
				 });
				 
			  }else{
				that.$util.Tips({
					title: res.message,
					icon: 'none',
					duration:1000
				})
			  } 
		  }).catch(er => {
			uni.hideLoading();
			that.$util.Tips({
				title: er,
				icon: 'error'
			})
		  });
	  },
	  closeWaterPop(){
		  this.$refs.popup2.close();
	  },
	  showWaterDetail(){
		  uni.navigateTo({
		  	url: `/pages/2_development/user/water_order/verify_detail?id=`+this.use_data.id
		  })
	  }
    }
	}
</script>

<style lang="scss">
@import './index.scss';

.new-users {
	.user-menus{
		border-radius: 12rpx;
		.item {
			width: 25%;
		}
	}
}
.order-wrapper{
	margin-top: 30rpx;
	.order-hd{
		border-bottom: 1px solid DDDDDD;
		&:last-child{
			border-bottom: none;
		}
	}
}

	/****/
	
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		height: 200rpx;
		width:90%;
		margin: 30rpx;
		font-size: 28rpx;
	}
	.green{
		color: green;
		font-size: 30rpx;
	}
	.red{
		color: red;
		font-size: 30rpx;
	}
	.pop-content{
		height: 300rpx;
		flex:1;
		// flex-direction: row;
	}
	.testclas{
		font-size: 30rpx;
		color: #FF9600;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.agree-btn{
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height:60rpx;
		border-radius: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 30rpx;
		background-color: #01A1ED;
	}
	
	.gray_btn{
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height:60rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 30rpx;
		color: #c1c1c1;
		background-color: #f1f1f1;
	}
	
	.btn-selected{
		background-color: #01A1ED;
	}
	
	
	
	/****/
	
	.popup-cls2{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		.pop-info{
			width:90%;
			background-color: white;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			margin: 0 auto;
			
			.pop-top{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				.left{
					width: 80rpx;
				}
				.pop_title{
					font-size: 28rpx;
					color: #000000;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
				}
				.right{
					width: 80rpx;
					height: 80rpx;
					
					.close{
						width:33rpx;
						height:33rpx;
						margin-top: 20rpx;
					}
				}
			}
			
			.center{
				height: 320rpx;
				width:90%;
				margin: 30rpx;
				.section{
					font-size: 28rpx;
					color: black;
					padding: 10rpx 0rpx;
					.red{
						color: red;
					}
					.green{
						color: green;
					}
					.black{
						color: black;
					}
				}
			}
			
			.bottom{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.agree-btn{
					flex: 1;
					margin-left: 40rpx;
					margin-right: 40rpx;
					height:60rpx;
					border-radius: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 60rpx;
					margin-bottom: 30rpx;
					background-color: #01A1ED;
				}
				
				.gray_btn{
					flex: 1;
					margin-left: 40rpx;
					margin-right: 40rpx;
					height:60rpx;
					border-radius: 30rpx;
					color: darkgray;
					text-align: center;
					line-height: 60rpx;
					margin-bottom: 30rpx;
					background-color: lightgray;
				}
				
				.btn-selected{
					background-color: #01A1ED;
				}
			}
			
		}
		
	}
	
	
</style>
